<template>
  <div class="tab-content">
    <div class="tab-main-content">
      <div class="search channel-search">
        <el-select
          v-model="selectedParkId"
          placeholder="请选择停车场"
          size="small"
        >
          <el-option
            v-for="item in parkInfoList"
            :key="item.parkId"
            :label="item.parkName"
            :value="item.parkId"
          >
          </el-option>
        </el-select>

        <el-input
          placeholder="请输入通道名称"
          v-model="query_channeName"
          class="input-with-select"
          size="small"
          @keyup.enter.native="searchChannelList"
        >
          <template slot="prepend">通道名称</template>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchChannelList"
          ></el-button>
        </el-input>
      </div>
    </div>

    <div class="park-list channel-list">
      <el-checkbox-group
        v-model="checkedChannle"
        @change="handleCheckChannel"
      >
        <div
          class="park-item"
          v-for="(item, index) in searchedQrList"
          :key="index"
        >
          <div class="park-name item">
            <el-checkbox
              :label="selectedParkName + '-' + item.channeName + '@' + item.qrCodeUrl"
            >{{item.channeName}}</el-checkbox>
          </div>

          <div class="qr-src item">
            <div class="title"> 二维码链接</div>

            <el-input
              v-model="item.qrCodeUrl"
              :disabled="true"
              size="small"
            >
            </el-input>
          </div>

          <div class="actions item">
            <a class="hover-item has-tip" @click.prevent="doCopy(item, index)">复制链接
              <span class="more-tip" v-show="showCopyed && index === copiedIndex">Copied !</span>
            </a>
            <a class="hover-item" @click.prevent="showPreviewDialogFn(item)">预览</a>
          </div>

        </div>
      </el-checkbox-group>

      <div class="all-check">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
        >全选</el-checkbox>
        <div class="checked-tips">
          已选择{{checkedChannle.length}}个通道
        </div>
      </div>

    </div>

    <el-button
      type="primary"
      size="small"
      @click="batchDownloadQrCode"
    >下载二维码</el-button>

    <div class="qr-tips">
      <div class="title">通道二维码-使用场景</div>
      <div class="tips-bd">
        出入口使用，支持对应通道车辆的自助进出及缴费。
      </div>
    </div>


    <el-dialog
      :title="previewInfo.channeName + '二维码'"
      :visible.sync="isShowPreviewDialog"
      width="400px"
      class="zb-dialog"
    >
      <div class="img-box">
        <!-- <img :src="previewInfo.logoUrl" alt=""> -->
        <qrcode v-show="previewInfo.qrCodeUrl" :value="previewInfo.qrCodeUrl" tag="img" :options="{ width: 220 }"></qrcode>
      </div>
    </el-dialog>


  </div>
</template>


<script>
import common from '@/mixins/common.js'
let copiedTimer = null
export default {
  mixins: [common],
  props: {
    info: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data() {
    return {
      query_channeName: '',
      parkInfoList: this.info || [],
      selectedParkId: [],
      selectedParkName:'',
      qrBaseList: [],
      searchedQrList: [],
      checkedChannle: [],
      isShowPreviewDialog: false,
      previewInfo: {
        channeName: '',
        qrCodeUrl: '',
        qrCodeBase64: ''
      },

      checkAll: false,
      isIndeterminate: false,
      showCopyed: false,
      copiedIndex: -1
    };
  },
  mounted () {
    if (this.parkInfoList.length > 0) {
      this.setSelectedParkInfo(this.parkInfoList[0])
    }
  },
  methods: {
    // 复制链接
    doCopy (item, index) {
      let self = this
      this.$copyText(item.qrCodeUrl).then(function (e) {
        self.showCopyed = true
        self.copiedIndex = index
        clearTimeout(copiedTimer)
        copiedTimer = null
        copiedTimer = setTimeout(function () {
          self.showCopyed = false
        }, 2000)
      }, function (e) {
      })
    },

    setSelectedParkInfo (_info) {
      if (!_info) return
      this.selectedParkId = _info.parkId
      this.qrBaseList = _info.qrBaseList
      this.searchedQrList = JSON.parse(JSON.stringify(this.qrBaseList))
      this.checkedChannle = []
      this.checkAll = false
      this.isIndeterminate = false
      this.searchChannelList()
    },

    showPreviewDialogFn (item) {
      this.isShowPreviewDialog = true
      this.previewInfo.qrCodeUrl = item.qrCodeUrl
      this.previewInfo.qrCodeBase64 = item.qrCodeBase64
      this.previewInfo.channeName = item.channeName
    },

    // // 批量下载
    // batchDownloadQrCode () {
    //   if (this.checkedChannle.length === 0) {
    //     this.showToast('请先选择停车场', 0, 1500)
    //     return
    //   }
    //   let params = {
    //     urlList: this.checkedChannle
    //   }
    //   API.fetchPost('/valueAdded/batchDownloadQrCode', params)
    //     .then(data => {
    //       console.log(data)
    //     }, err => {
    //       console.log(err)
    //     })
    // },
    // 批量下载
    batchDownloadQrCode () {
      if (this.checkedChannle.length === 0) {
        this.showToast('请先选择通道', 0, 1500)
        return
      }
      API.fetchPostData('/valueAdded/batchDownloadQrCode', this.checkedChannle)
        .then(data => {
          console.log(data)

          let objUrl = URL.createObjectURL(data)

          // window.location.href = objUrl
          const link = document.createElement('a');
          link.setAttribute('href', objUrl);
          link.setAttribute('download', 'qrCode.zip');
          link.style.visibility = 'hidden';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);

          this.showToast('下载成功！', 1, 1500)
        }, err => {
          console.log(err)
          this.showToast('下载失败！', 2, 1500)
        })
    },

    // 搜索通道名称
    searchChannelList () {
      let _query_channeName = this.query_channeName

      if (!_query_channeName) {
        this.searchedQrList = JSON.parse(JSON.stringify(this.qrBaseList))
      } else {
        this.searchedQrList = this.qrBaseList.filter(item => {
          let name = item.channeName
          return name && name.indexOf(_query_channeName) > -1
        })
      }
      // let

      this.handleCheckChannel([])
    },

    handleCheckAllChange(Val) {
      this.checkedChannle = []
      if (Val) {
        let _list = this.searchedQrList
        let _checked = []
        _list.forEach(item => {
        	 var data = item.channeName + "@" + item.qrCodeUrl;
        	 if(this.selectedParkName){
        	 	data = this.selectedParkName + "-" + item.channeName + "@" + item.qrCodeUrl;
        	 }
          _checked.push(data);
        })

        this.checkedChannle = _checked
      }
      this.isIndeterminate = false;
    },

    handleCheckChannel(Val) {
      let checkedCount = Val.length || this.checkedChannle.length
      this.checkAll = checkedCount === this.searchedQrList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.searchedQrList.length
    },
  },
  watch: {
    info (Val) {
      this.parkInfoList = Val
    },

    selectedParkId (Val) {
      let _info = JSON.parse(JSON.stringify(this.info))

      let _curInfo = _info.filter(item => {
        return item.parkId === Val
      })
      
      if(_curInfo && _curInfo[0]){
      	this.selectedParkName = _curInfo[0].parkName;
      }
      this.setSelectedParkInfo(_curInfo[0])
    }
  }
};
</script>

<style lang='less' scoped>
@import "../parkQr/index.less";
</style>
